<template>
  <div class="home">
    <span class="spa" @click="fen()">三<input class="tex" type="text"/></span>
    <hr />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banners" :key="item._id">
        <img class="img-l" :src="item.coverImg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <br />
    <span class="odiv">
      <img
        src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/41867/2/15966/7116/60ec0e0dE9f50d596/758babcb4f911bf4.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg.dpg"
        alt=""
      />
    </span>
    <ul>
      <li>京东超市</li>
      <li>数码电器</li>
      <li>京东服饰</li>
      <li>京东生鲜</li>
      <li>京东到家</li>
    </ul>
    <span class="odiv">
      <img
        src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/199143/10/8979/4223/614599f5E45cd5464/d15aa650a0ebe596.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="https://m.360buyimg.com/mobilecms/s120x120_jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg.dpg"
        alt=""
      />

      <img
        src="//m.360buyimg.com/mobilecms/s120x120_jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg.dpg"
        alt=""
      />
    </span>
    <ul>
      <li>充值缴费</li>
      <li>物流查询</li>
      <li>领劵领劵</li>
      <li>领津领贴</li>
      <li>PLUS会员</li>
    </ul>
    <br />
    <!-- 加载更多 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <span
        class="sp"
        v-for="item in products"
        :key="item._id"
        @click="godetail(item._id)"
      >
        <img class="img-r" :src="item.coverImg" />
        <div class="tab">
          <h4>{{ item.name }}</h4>
          <h4 class="price">￥:{{ item.price }}</h4>
        </div>
      </span>
    </van-list>
  </div>
</template>

<script>
import { reqBannersAPI, reqProductsAPI } from "../api/porduct";
export default {
  components: {},
  data() {
    return {
      banners: [],
      products: [],
      loading: false, //加载
      finished: false,
      page: 1, //没有数据不能请求接口
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 轮播图
    async getBanners() {
      var lunbo = await reqBannersAPI();
      console.log(lunbo);
      this.banners = lunbo.products;
    },

    // 商品列表
    async getProducts() {
      this.loading = true; //接口数据显示
      const result = await reqProductsAPI({ page: this.page });
      this.loading = false; //接口数据获取成功消失
      this.products = [...this.products, ...result.products]; //合并数据
      result.products.length < 10 ? (this.finished = true) : this.page++;
      console.log(result);
    }, //下拉自动触发
    onLoad() {
      this.getProducts();
    },
    // 详情页
    godetail(id) {
      this.$router.push(`/detail/${id}`);
    },
    // 搜索跳转
    fen() {
      this.$router.push("/Fenlei");
    },
  },
  created() {
    this.getBanners();
  },
  mounted() {},
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 0px;
  text-align: center;
  background-color: #39a9ed;
}
.spa {
  width: 300px;
  height: 40px;
  color: #9d9e9e;
}
input {
  margin-left: 70px;
  margin-top: 10px;
  border-radius: 8px;
  border: 1px solid #cacaca;
  width: 50vw;
}
.my-swipe .van-swipe-item .img-l {
  width: 100vw;
  height: 50vw;
}
.odiv img {
  width: 40px;
  height: 40px;
}
.odiv {
  display: flex;
  justify-content: center;
  justify-content: space-around;
}
ul {
  display: flex;
  justify-content: space-around;
  color: #9d9e9e;
  font-size: 14px;
}
.sp {
  display: block;
  width: 178px;
  height: 300px;
  border: 1px solid #cacaca;
  float: left;
  margin: 3px;
  position: relative;
}
.img-r {
  width: 178px;
  height: 178px;
}
.price {
  color: red;
  position: absolute;
  bottom: -20px;
}
</style>
